/**
 * 基准 业务组件 下拉列表结构
 * 获取基准的接口是以前的老接口，未按标准进行改正，但调用接口的方式前端进行了优化
 * by zhangxinyue
 * create 2020-11-25
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Select, Tooltip, Form } from 'antd';
import { FormItemLayout } from '../../form/formPub';

const { Option } = Select;

class BenchMarkC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '基准',
    placeholder: '请选择基准',
    helper: '',
    initialValue: undefined, // 默认无初始化值
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: undefined, // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    multiple: false, // 默认单选
    maxTagCount: 0, // 默认多选时，最多选择1条
    labalWrap: false,
  };

  dsAll = []; // 存储业绩基准全量

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);

    // 调用接口，获取基准数据
    this.getBenchMark((e) => {
      this.dsAll = e;
      this.setState({
        dataSource: e,
      });

      // 若有初始化数据，抛出onChange事件
      if (this.props.initialValue) {
        this.onChange(this.props.initialValue);
      }
    });
  }

  componentDidUpdate(preProps) {
    // 异步初始值 延迟加载 手动设置初始值
    const initT = preProps.initialValue ? JSON.stringify(preProps.initialValue) : '';
    const initN = this.props.initialValue ? JSON.stringify(this.props.initialValue) : '';
    if (initN !== initT && initN !== '') {
      this.onChange(this.props.initialValue);
      this.props.form?.setFieldsValue({
        [preProps.dataIndex]: this.props.initialValue,
      });
    }
  }

  // 调用接口，获取基准树形结构
  getBenchMark = (callback) => {
    this.props.dispatch({
      type: 'benchMarkM/getBenchMark',
      callback,
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);

    const temp = this.dsAll.filter((item) => {
      return item.value === value;
    });
    // 触发基准切换事件
    this.onChange(temp && temp.length == 1 ? temp[0] : undefined);
  };

  // 模糊搜索
  onSearch = (e) => {
    const ds = this.dsAll.filter((item) => {
      return item.title.indexOf(e) > -1;
    });

    this.setState({
      dataSource: ds,
    });
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      // 调用接口，获取基准数据
      this.getBenchMark((e) => {
        this.setState({
          dataSource: e,
        });
        this.dsAll = e;
      });
    }
  };

  // 基准切换事件
  onChange = (e) => {
    // 多选模式
    if (this.props.multiple) {
      if (e && e.length) {
        const ds = [];
        e.forEach((element) => {
          const temp = this.dsAll.filter((item) => {
            return item.value === element;
          });
          ds.push(temp && temp.length == 1 ? temp[0] : undefined);
        });
        // 对外抛出事件
        this.props.onChange(ds);
      } else {
        // 对外抛出事件
        this.props.onChange(undefined);
      }
    } else {
      // 单选模式
      const ds = this.dsAll.filter((item) => {
        return item.value === e;
      });

      // 对外抛出事件
      this.props.onChange(ds && ds.length === 1 ? ds[0] : undefined);
    }
  };

  render() {
    const { labalWrap, styleRow, title, dataIndex, initialValue, placeholder, helper, width, rules, formItemLayout, allowClear, disabled, multiple, maxTagCount } = this.props;
    return (
      <Form.Item
        name={dataIndex}
        initialValue={initialValue}
        rules={rules ? rules : []}
        colon={false}
        className={labalWrap ? 'labalWrap' : ''}
        {...formItemLayout}
        label={
          helper ? (
            <span>
              {title}&nbsp;
              <Tooltip title={helper}>
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          ) : (
            <span>{title}</span>
          )
        }
      >
        <Select
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          style={styleRow ? styleRow : { width }}
          placeholder={placeholder}
          onChange={this.onChange}
          allowClear={allowClear}
          filterOption={this.filter}
          showSearch={true} // 使单选模式可搜索
          onSearch={this.onSearch} // 模糊搜索
          onDropdownVisibleChange={this.onDropdownVisibleChange}
          disabled={disabled}
          mode={multiple ? 'multiple' : undefined}
          maxTagCount={maxTagCount}
        >
          {this.state.dataSource.map((item) => (
            <Option value={item.value} key={item.value}>
              {item.title}
            </Option>
          ))}
        </Select>
      </Form.Item>
    );
  }
}

// props类型
BenchMarkC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.object, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  multiple: PropTypes.bool, // 是否支持多选
  maxTagCount: PropTypes.number, // 多选时，做多显示多少条
};

export default connect(({ benchMarkM, loading }) => ({ benchMarkM, loading }))(BenchMarkC);
